<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>腾飞健康管理平台</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="css/oksub.css">
    <style>
        .word {
            position: absolute;
            right: 10px;
            bottom: 10px;
            color: #aaa;
            font-size: 12px;
        }
    </style>
</head>
<body>
<div class="ok-body">
    <form class="layui-form  ok-form">
        <div class="layui-form-item">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-inline">
                <input type="text" name="examinerName" placeholder="请输入员工姓名" autocomplete="off" class="layui-input"
                       lay-verify="required">
            </div>
            <label class="layui-form-label">状态</label>
            <div class="layui-input-inline">
                <input type="checkbox" name="status" lay-skin="switch" lay-text="启用|禁用">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">身份证号</label>
                <div class="layui-input-inline">
                    <input type="text" name="idNumber" placeholder="请输入身份证号" autocomplete="off" class="layui-input"
                           lay-verify="required|identity" maxlength="18">
                </div>
                <label class="layui-form-label">出生日期</label>
                <div class="layui-input-inline">
                    <input type="text" name="birthday" placeholder="出生日期" autocomplete="off" class="layui-input"
                           lay-verify="date" disabled="disabled">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">职称类别</label>
                <div class="layui-input-inline">
                    <select name="professionalType" lay-filter="professionalType">
                        <option value="">请选择</option>
                    </select>
                </div>
                <label class="layui-form-label">职称</label>
                <div class="layui-input-inline">
                    <select name="professionalTitleId" lay-filter="professionalTitle" disabled="disabled">
                        <option value="">请选择</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">科室</label>
                <div class="layui-input-inline">
                    <input type="text" name="office" placeholder="请输入科室" autocomplete="off" class="layui-input"
                           lay-verify="required">
                </div>
                <label class="layui-form-label">职务</label>
                <div class="layui-input-inline">
                    <input type="text" name="duty" placeholder="请输入职务" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <!--<div class="layui-form-item">
            <label class="layui-form-label">证件照</label>
            <div class="layui-input-block">
                <input type="text" name="picture" placeholder="请上传证件照" class="layui-input" lay-verify="required">
            </div>
        </div>-->
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">学位</label>
                <div class="layui-input-inline">
                    <select name="degree" lay-verify="required">
                        <option value="">请选择</option>
                        <option value="无">无</option>
                        <option value="学士">学士</option>
                        <option value="硕士">硕士</option>
                        <option value="博士">博士</option>
                        <option></option>
                    </select>
                </div>
                <label class="layui-form-label">学校</label>
                <div class="layui-input-inline">
                    <input type="text" name="school" placeholder="请输入获得最高学历的学校" class="layui-input"
                           lay-verify="required">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">政治面貌</label>
                <div class="layui-input-inline">
                    <select name="politicStatus" lay-verify="required">
                        <option value="">请选择</option>
                        <option value="群众">群众</option>
                        <option value="中共党员">中共党员</option>
                        <option value="中共预备党员">中共预备党员</option>
                        <option value="共青团员">共青团员</option>
                        <option value="民革党员">民革党员</option>
                        <option value="民盟盟员">民盟盟员</option>
                        <option value="民建会员">民建会员</option>
                        <option value="民进会员">民进会员</option>
                        <option value="农工党党员">农工党党员</option>
                        <option value="致公党党员">致公党党员</option>
                        <option value="九三学社社员">九三学社社员</option>
                        <option value="台盟盟员">台盟盟员</option>
                        <option value="无党派人士">无党派人士</option>
                    </select>
                </div>
                <label class="layui-form-label">宗教信仰</label>
                <div class="layui-input-inline">
                    <select name="faith" lay-verify="required">
                        <option value="">请选择</option>
                        <option value="无">无</option>
                        <option value="佛教">佛教</option>
                        <option value="基督教">基督教</option>
                        <option value="伊斯兰教">伊斯兰教</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">民族</label>
            <div class="layui-input-block">
                <select name="nationId" lay-verify="required">
                    <option value="">请选择</option>
                    <option value="1">汉族</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">电话</label>
                <div class="layui-input-inline">
                    <input type="text" name="telephone" placeholder="请输入手机号码" autocomplete="off" class="layui-input"
                           lay-verify="required|phone">
                </div>
                <label class="layui-form-label">邮箱</label>
                <div class="layui-input-inline">
                    <input type="text" name="email" placeholder="请输入邮箱" autocomplete="off" class="layui-input"
                           lay-verify="required|email">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">住址</label>
            <div class="layui-input-block">
                <input type="text" name="address" placeholder="请输入地址" autocomplete="off" class="layui-input"
                       lay-verify="required" maxlength="64">
            </div>
        </div>

        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">个人介绍</label>
            <div class="layui-input-block">
                <textarea name="description" placeholder="请输入内容" class="layui-textarea" style="position: relative"
                          maxlength="500"
                          onpropertychange="if(value.length>500) value=value.substr(0,500)"
                          oninput="wordLeg(this);"></textarea>
                <div class="word">
                    <span class="text_count">0</span> / <span class="num_count" id="numCount">500</span>
                </div>
                <div style="margin-top: 20px"></div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="registe">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>

    <script src="lib/layui/layui.js"></script>
    <script>
        layui.use(["form", "element", "okUtils", "okLayer"], function () {
            let form = layui.form;
            let $ = layui.jquery;
            let okUtils = layui.okUtils;
            let okLayer = layui.okLayer;

            //提交表单
            form.on("submit(registe)", function (data) {
                /*okUtils.ajax("/registeExaminer", "post", data.field, true)
                    .done(function (responseResult) {
                        okLayer.greenTickMsg(responseResult.msg, function () {
                            console.log(data.field);
                            parent.layer.close(parent.layer.getFrameIndex(window.name));
                        });
                    })
                    .fail(function (error) {
                        console.log(error)
                    });*/
                console.log(data.field);
                $.ajax({
                    url: "/registeExaminer",
                    data: data.field,
                    dataType: "json",
                    type: "post",
                    success: function(responseResult) {
                        okLayer.greenTickMsg(responseResult.msg, function () {
                            parent.layer.close(parent.layer.getFrameIndex(window.name));
                        });
                    },
                    error: function(){
                        console.log("提交数据失败，服务器错误！");
                    }
                });
                return false;
            });

            //获取‘professionalType’列表的方法
            var getProfessionalTypeList = function () {
                $.ajax({
                    url: "/getAllProfessionalTypeList",
                    dataType: "json",
                    type: "get",
                    async: "true",
                    success: function (responseData) {
                        for (var i = 0; i < responseData.length; i++) {
                            $("select[name=professionalType]").append("<option value=" + responseData[i].professionalType + ">" + responseData[i].professionalType + "</option>");
                        }
                        form.render("select");
                    },
                    error: function () {
                        console.log("getAllProfessionalTypeList error");
                    }
                });
            }
            //调用getProfessionalTypeList()方法生成下拉项；
            getProfessionalTypeList();

            form.on("select(professionalType)", function (data) {
                console.log(data.value);
                if (data.value != "") {
                    $.ajax({
                        url: "/getProfessionalTitleListByType?professionalType=" + data.value,
                        dataType: "json",
                        type: "get",
                        async: true,
                        success: function (responseData) {
                            $("select[name=professionalTitleId]").removeAttr("disabled").html("").append("<option value=''>请选择</option>");
                            for (var i = 0; i < responseData.length; i++) {
                                $("select[name=professionalTitleId]").append("<option value=" + responseData[i].professionalTitleId + ">" + responseData[i].professionalTitle + "</option>");
                            }
                            form.render("select");
                        },
                        error: function () {
                            console.log("getProfessionalTitleListByType error");
                        }
                    });
                } else {
                    $("select[name=professionalTitleId]").attr("disabled", "disabled");
                    form.render('select');
                }
            });

            //监听‘单位介绍’textarea中的字符数量
            window.wordLeg = function (obj) {
                var currleg = $(obj).val().length;
                var length = $(obj).attr('maxlength');
                if (currleg >= length) {
                    layer.msg('字数请在' + length + '字以内');
                } else {
                    $('.text_count').text(currleg);
                }
            }

            //监控‘身份证号’中的值，解析获取出生日期
            $("input[name=idNumber]").bind("input propertychange", function (event) {
                let idNumber = $("input[name=idNumber]").val();
                let reg = /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
                if (reg.test(idNumber)) {
                    let year = idNumber.substring(6, 10);
                    let month = idNumber.substring(10, 12);
                    let day = idNumber.substring(12, 14);
                    $("input[name=birthday]").val(year + "-" + month + "-" + day);
                } else {
                    $("input[name=birthday]").val("");
                    form.render("radio");
                }
            });


        })
        ;
    </script>
</div>
</body>
</html>